<template>
    <div>
        <!--素材标题（全部/收藏操作）-->
        <div class="material-header">
            <el-radio-group v-model="check" size="mini" @change="checkClick(check)">
                <el-radio-button :label="1">全部</el-radio-button>
                <el-radio-button :label="2">收藏</el-radio-button>
            </el-radio-group>
            <el-button
                    type="success"
                    size="mini"
                    @click="dialogUploadVisible = !dialogUploadVisible"
                    v-if="isShowUpload"
            >上传素材</el-button>
        </div>
        <!--图片素材，内容-->
        <el-row :gutter="10">
            <el-col :xs="12"
                    :sm="6"
                    :md="4"
                    :lg="3"
                    v-for="(item, index) in img"
                    :key="item.id"
                    class="img_box"
                    @click.native="selected = index"
            >
                <!--是否被选中，默认不显示-->
                <div class="selected" v-if="isShowSelected && selected === index"></div>
                <!--图片-->
                <el-image
                        style="width: 100px; height: 100px"
                        fit="cover"
                        :src="item.img_url"
                        :preview-src-list="isShowPreview? imgListURL:[]"
                        class="material_img"
                ></el-image>
                <!--收藏/删除操作-->
                <div class="img_bottom" v-if="isShowHandle">
                    <el-button type="warning" icon="el-icon-star-off" circle size="mini"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
                </div>

            </el-col>
        </el-row>
        <!--页码-->
        <div class="footer-page">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="20">
            </el-pagination>
        </div>
        <!--上传素材图片的弹出层-->
        <el-dialog
                title="素材上传"
                :visible.sync="dialogUploadVisible"
                :append-to-body="true"
                custom-class="dialog"
                width="400px"
                center
        >
            <el-upload
                    class="upload-demo"
                    drag
                    action="#"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "material",
        data() {
            return {
                check:1,
                img:[],
                imgListURL:[],
                dialogUploadVisible:false,
                selected:null
            }
        },
        props:{
            isShowUpload:{
                type:Boolean,
                default:true
            },
            isShowHandle:{
                type:Boolean,
                default:true
            },
            isShowPreview:{
                type:Boolean,
                default:true
            },
            isShowSelected:{
                type:Boolean,
                default:false
            }
        },
        methods: {
            //获得全部图片数据
            getImgData(){
                if(this.check === 1){
                    this.imgListURL = []
                    this.img = this.$store.state.materialPictureData
                    this.$store.state.materialPictureData.forEach(item =>{
                        this.imgListURL.push(item.img_url)
                    })
                }else if(this.check === 2){
                    this.imgListURL = []
                    this.img = this.$store.state.materialPictureCollect
                    this.$store.state.materialPictureCollect.forEach(item =>{
                        this.imgListURL.push(item.img_url)
                    })
                }
            },
            //获得收藏图片数据
            checkClick(){
                this.getImgData()
            }
        },
        created() {
            this.getImgData()
        }
    }
</script>

<style scoped lang="scss">
    img{
        display: block;
    }
    .material-header{
        display: flex;
        justify-content:space-between;
        margin-bottom: 20px;
        user-select: none;
    }
    .footer-page{
        margin-top: 20px;
    }
    .img_box{
        position: relative;
        .selected{
            display: block;
            background: url("./selected.png") no-repeat;
            background-size: cover;
            position: absolute;
            z-index: 100;
            width: 100px;
            height: 100px;
        }
        .material_img:hover~.img_bottom{
            opacity: 1;
        }
        .img_bottom{
            position: absolute;
            right: 0;
            left: 5px;
            bottom: 4px;
            width: 100px;
            height: 33px;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            opacity: 0;
        }
        .img_bottom:hover{
            opacity: 1;
        }
    }
</style>
